ไขปริศนา JavaScript Iterator Protocol และการสร้าง Custom Iterators

Iterator Protocol ของ JavaScript เป็นวิธีการที่เป็นมาตรฐานในการวนซ้ำ (traverse) โครงสร้างข้อมูล การทำความเข้าใจโปรโตคอลนี้จะช่วยให้นักพัฒนาสามารถทำงานกับ iterables ที่มีอยู่แล้วในตัว เช่น อาร์เรย์และสตริง ได้อย่างมีประสิทธิภาพ และยังสามารถสร้าง iterables แบบกำหนดเองที่เหมาะกับโครงสร้างข้อมูลและข้อกำหนดของแอปพลิเคชันได้ คู่มือนี้จะสำรวจ Iterator Protocol อย่างละเอียดและวิธีสร้าง custom iterators

Iterator Protocol คืออะไร?

Iterator Protocol กำหนดว่าอ็อบเจ็กต์จะสามารถวนซ้ำได้อย่างไร กล่าวคือ จะเข้าถึงองค์ประกอบต่างๆ ตามลำดับได้อย่างไร ประกอบด้วยสองส่วนคือ: Iterable protocol และ Iterator protocol

Iterable Protocol

อ็อบเจ็กต์จะถือว่าเป็น Iterable หากมีเมธอดที่มีคีย์เป็น Symbol.iterator เมธอดนี้จะต้องคืนค่าอ็อบเจ็กต์ที่สอดคล้องกับ Iterator protocol

โดยสรุป อ็อบเจ็กต์ที่เป็น iterable จะรู้วิธีสร้าง iterator สำหรับตัวมันเอง

Iterator Protocol

Iterator protocol กำหนดวิธีการดึงค่าจากลำดับ อ็อบเจ็กต์จะถือว่าเป็น iterator หากมีเมธอด next() ที่คืนค่าอ็อบเจ็กต์ซึ่งมีสองคุณสมบัติ:

• value: ค่าถัดไปในลำดับ
• done: ค่าบูลีนที่ระบุว่า iterator ได้วนซ้ำไปจนสุดลำดับแล้วหรือไม่ หาก done เป็น true สามารถละเว้นคุณสมบัติ value ได้

เมธอด next() เป็นหัวใจสำคัญของ Iterator protocol การเรียก next() แต่ละครั้งจะทำให้ iterator เคลื่อนไปข้างหน้าและคืนค่าถัดไปในลำดับ เมื่อค่าทั้งหมดถูกส่งคืนแล้ว next() จะคืนค่าอ็อบเจ็กต์ที่มี done เป็น true

Iterables ที่มีมาในตัว (Built-in)

JavaScript มีโครงสร้างข้อมูลในตัวหลายอย่างที่เป็น iterable โดยธรรมชาติ ซึ่งรวมถึง:

• Arrays (อาร์เรย์)
• Strings (สตริง)
• Maps
• Sets
• Arguments object ของฟังก์ชัน
• TypedArrays

Iterables เหล่านี้สามารถใช้ได้โดยตรงกับลูป for...of, spread syntax (...) และโครงสร้างอื่นๆ ที่ใช้ Iterator Protocol

ตัวอย่างกับอาร์เรย์ (Arrays):

            
const myArray = ["apple", "banana", "cherry"];

for (const item of myArray) {
  console.log(item); // Output: apple, banana, cherry
}

            

              
                Copy
              
            
          

ตัวอย่างกับสตริง (Strings):

            
const myString = "Hello";

for (const char of myString) {
  console.log(char); // Output: H, e, l, l, o
}

            

              
                Copy
              
            
          

ลูป for...of

ลูป for...of เป็นโครงสร้างที่ทรงพลังสำหรับการวนซ้ำอ็อบเจ็กต์ที่เป็น iterable มันจะจัดการความซับซ้อนของ Iterator Protocol โดยอัตโนมัติ ทำให้ง่ายต่อการเข้าถึงค่าต่างๆ ในลำดับ

ไวยากรณ์ของลูป for...of คือ:

            
for (const element of iterable) {
  // Code to be executed for each element
}

            

              
                Copy
              
            
          

ลูป for...of จะดึง iterator จากอ็อบเจ็กต์ iterable (โดยใช้ Symbol.iterator) และเรียกเมธอด next() ของ iterator ซ้ำๆ จนกว่า done จะกลายเป็น true ในแต่ละรอบของการวนซ้ำ ตัวแปร element จะถูกกำหนดค่าด้วยคุณสมบัติ value ที่ส่งคืนโดย next()

การสร้าง Custom Iterators

แม้ว่า JavaScript จะมี iterables ในตัว แต่พลังที่แท้จริงของ Iterator Protocol อยู่ที่ความสามารถในการกำหนด iterators แบบกำหนดเองสำหรับโครงสร้างข้อมูลของคุณเอง ซึ่งช่วยให้คุณควบคุมวิธีการวนซ้ำและเข้าถึงข้อมูลของคุณได้

นี่คือวิธีการสร้าง iterator แบบกำหนดเอง:

1. กำหนดคลาสหรืออ็อบเจ็กต์ที่แสดงถึงโครงสร้างข้อมูลแบบกำหนดเองของคุณ
2. ใช้งานเมธอด Symbol.iterator บนคลาสหรืออ็อบเจ็กต์ของคุณ เมธอดนี้ควรคืนค่าอ็อบเจ็กต์ iterator
3. อ็อบเจ็กต์ iterator ต้องมีเมธอด next() ที่คืนค่าอ็อบเจ็กต์ที่มีคุณสมบัติ value และ done

ตัวอย่าง: การสร้าง Iterator สำหรับช่วงตัวเลขอย่างง่าย (Simple Range)

เรามาสร้างคลาสชื่อ Range ซึ่งแสดงถึงช่วงของตัวเลข เราจะใช้งาน Iterator Protocol เพื่อให้สามารถวนซ้ำตัวเลขในช่วงนั้นได้

            
class Range {
  constructor(start, end) {
    this.start = start;
    this.end = end;
  }

  [Symbol.iterator]() {
    let currentValue = this.start;
    const that = this; // Capture 'this' for use inside the iterator object

    return {
      next() {
        if (currentValue <= that.end) {
          return {
            value: currentValue++,
            done: false,
          };
        } else {
          return {
            value: undefined,
            done: true,
          };
        }
      },
    };
  }
}

const myRange = new Range(1, 5);

for (const number of myRange) {
  console.log(number); // Output: 1, 2, 3, 4, 5
}

            

              
                Copy
              
            
          

คำอธิบาย:

• คลาส Range รับค่า start และ end ใน constructor
• เมธอด Symbol.iterator คืนค่าอ็อบเจ็กต์ iterator ซึ่งอ็อบเจ็กต์ iterator นี้มีสถานะของตัวเอง (currentValue) และเมธอด next()
• เมธอด next() จะตรวจสอบว่า currentValue อยู่ในช่วงที่กำหนดหรือไม่ ถ้าใช่ จะคืนค่าอ็อบเจ็กต์ที่มีค่าปัจจุบันและ done เป็น false และยังเพิ่มค่า currentValue สำหรับการวนซ้ำครั้งต่อไป
• เมื่อ currentValue เกินค่า end เมธอด next() จะคืนค่าอ็อบเจ็กต์ที่มี done เป็น true
• สังเกตการใช้ that = this เนื่องจากเมธอด `next()` ถูกเรียกในขอบเขต (scope) ที่แตกต่างกัน (โดยลูป `for...of`) ดังนั้น `this` ภายใน `next()` จะไม่ได้อ้างอิงถึงอินสแตนซ์ของ `Range` เพื่อแก้ปัญหานี้ เราจึงเก็บค่า `this` (อินสแตนซ์ของ `Range`) ไว้ใน `that` นอกขอบเขตของ `next()` แล้วจึงใช้ `that` ภายใน `next()`

ตัวอย่าง: การสร้าง Iterator สำหรับ Linked List

ลองพิจารณาอีกตัวอย่างหนึ่ง: การสร้าง iterator สำหรับโครงสร้างข้อมูลแบบ linked list ซึ่ง linked list คือลำดับของโหนด (node) โดยแต่ละโหนดจะมีค่าและตัวอ้างอิง (pointer) ไปยังโหนดถัดไปในลิสต์ โหนดสุดท้ายในลิสต์จะอ้างอิงถึง null (หรือ undefined)

            
class LinkedListNode {
    constructor(value, next = null) {
        this.value = value;
        this.next = next;
    }
}

class LinkedList {
    constructor() {
        this.head = null;
    }

    append(value) {
        const newNode = new LinkedListNode(value);
        if (!this.head) {
            this.head = newNode;
            return;
        }

        let current = this.head;
        while (current.next) {
            current = current.next;
        }
        current.next = newNode;
    }

    [Symbol.iterator]() {
        let current = this.head;

        return {
            next() {
                if (current) {
                    const value = current.value;
                    current = current.next;
                    return {
                        value: value,
                        done: false
                    };
                } else {
                    return {
                        value: undefined,
                        done: true
                    };
                }
            }
        };
    }
}

// Example Usage:
const myList = new LinkedList();
myList.append("London");
myList.append("Paris");
myList.append("Tokyo");

for (const city of myList) {
    console.log(city); // Output: London, Paris, Tokyo
}

            

              
                Copy
              
            
          

คำอธิบาย:

• คลาส LinkedListNode แสดงถึงโหนดเดียวใน linked list โดยเก็บ value และตัวอ้างอิง (next) ไปยังโหนดถัดไป
• คลาส LinkedList แสดงถึง linked list ทั้งหมด ประกอบด้วยคุณสมบัติ head ซึ่งชี้ไปยังโหนดแรกในลิสต์ เมธอด append() จะเพิ่มโหนดใหม่เข้าไปที่ท้ายลิสต์
• เมธอด Symbol.iterator สร้างและคืนค่าอ็อบเจ็กต์ iterator ซึ่ง iterator นี้จะติดตามโหนดปัจจุบันที่กำลังเข้าถึง (current)
• เมธอด next() จะตรวจสอบว่ามีโหนดปัจจุบันหรือไม่ (current ไม่ใช่ null) หากมี จะดึงค่าจากโหนดปัจจุบัน เลื่อนตัวชี้ current ไปยังโหนดถัดไป และคืนค่าอ็อบเจ็กต์ที่มีค่าและ done: false
• เมื่อ current กลายเป็น null (หมายความว่าเราได้ไปถึงจุดสิ้นสุดของลิสต์แล้ว) เมธอด next() จะคืนค่าอ็อบเจ็กต์ที่มี done: true

Generator Functions

Generator functions เป็นวิธีที่กระชับและสวยงามกว่าในการสร้าง iterators โดยใช้คีย์เวิร์ด yield เพื่อสร้างค่าตามความต้องการ

Generator function จะถูกกำหนดโดยใช้ไวยากรณ์ function*

ตัวอย่าง: การสร้าง Iterator โดยใช้ Generator Function

เรามาเขียน iterator Range ใหม่โดยใช้ generator function:

            
class Range {
  constructor(start, end) {
    this.start = start;
    this.end = end;
  }

  *[Symbol.iterator]() {
    for (let i = this.start; i <= this.end; i++) {
      yield i;
    }
  }
}

const myRange = new Range(1, 5);

for (const number of myRange) {
  console.log(number); // Output: 1, 2, 3, 4, 5
}

            

              
                Copy
              
            
          

คำอธิบาย:

• เมธอด Symbol.iterator ตอนนี้เป็น generator function (สังเกตเครื่องหมาย *)
• ภายใน generator function เราใช้ลูป for เพื่อวนซ้ำค่าตัวเลขในช่วงที่กำหนด
• คีย์เวิร์ด yield จะหยุดการทำงานของ generator function ชั่วคราวและคืนค่าปัจจุบัน (i) ครั้งต่อไปที่เมธอด next() ของ iterator ถูกเรียก การทำงานจะกลับมาเริ่มต่อจากจุดที่หยุดไว้ (หลังคำสั่ง yield)
• เมื่อลูปสิ้นสุดลง generator function จะคืนค่า { value: undefined, done: true } โดยปริยาย ซึ่งเป็นสัญญาณสิ้นสุดการวนซ้ำ

Generator functions ทำให้การสร้าง iterator ง่ายขึ้นโดยการจัดการเมธอด next() และแฟล็ก done โดยอัตโนมัติ

ตัวอย่าง: Generator ลำดับฟีโบนัชชี (Fibonacci Sequence)

อีกหนึ่งตัวอย่างที่ยอดเยี่ยมของการใช้ generator functions คือการสร้างลำดับฟีโบนัชชี:

            
function* fibonacciSequence() {
  let a = 0;
  let b = 1;

  while (true) {
    yield a;
    [a, b] = [b, a + b]; // Destructuring assignment for simultaneous update
  }
}

const fibonacci = fibonacciSequence();

for (let i = 0; i < 10; i++) {
  console.log(fibonacci.next().value); // Output: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34
}

            

              
                Copy
              
            
          

คำอธิบาย:

• ฟังก์ชัน fibonacciSequence เป็น generator function
• มันเริ่มต้นตัวแปรสองตัวคือ a และ b ให้เป็นตัวเลขสองตัวแรกในลำดับฟีโบนัชชี (0 และ 1)
• ลูป while (true) สร้างลำดับที่ไม่สิ้นสุด
• คำสั่ง yield a จะสร้างค่าปัจจุบันของ a
• คำสั่ง [a, b] = [b, a + b] จะอัปเดตค่า a และ b พร้อมกันให้เป็นตัวเลขสองตัวถัดไปในลำดับโดยใช้ destructuring assignment
• นิพจน์ fibonacci.next().value จะดึงค่าถัดไปจาก generator เนื่องจาก generator นี้ไม่มีที่สิ้นสุด คุณจึงต้องควบคุมจำนวนค่าที่ต้องการดึงออกมา ในตัวอย่างนี้ เราดึงค่า 10 ตัวแรกออกมา

ประโยชน์ของการใช้ Iterator Protocol

• ความเป็นมาตรฐาน: Iterator Protocol เป็นวิธีที่สอดคล้องกันในการวนซ้ำโครงสร้างข้อมูลที่แตกต่างกัน
• ความยืดหยุ่น: คุณสามารถกำหนด custom iterators ที่เหมาะกับความต้องการเฉพาะของคุณได้
• ความสามารถในการอ่าน (Readability): ลูป for...of ทำให้โค้ดการวนซ้ำอ่านง่ายและกระชับขึ้น
• ประสิทธิภาพ: Iterators สามารถเป็นแบบ lazy ได้ หมายความว่ามันจะสร้างค่าเมื่อจำเป็นเท่านั้น ซึ่งสามารถปรับปรุงประสิทธิภาพสำหรับชุดข้อมูลขนาดใหญ่ได้ ตัวอย่างเช่น generator ลำดับฟีโบนัชชีด้านบนจะคำนวณค่าถัดไปก็ต่อเมื่อมีการเรียก `next()` เท่านั้น
• ความเข้ากันได้ (Compatibility): Iterators ทำงานร่วมกับฟีเจอร์อื่นๆ ของ JavaScript ได้อย่างราบรื่น เช่น spread syntax และ destructuring

เทคนิค Iterator ขั้นสูง

การรวม Iterators

คุณสามารถรวม iterators หลายตัวเข้าเป็น iterator เดียวได้ ซึ่งมีประโยชน์เมื่อคุณต้องการประมวลผลข้อมูลจากหลายแหล่งที่มาในรูปแบบที่เป็นหนึ่งเดียวกัน

            
function* combineIterators(...iterables) {
  for (const iterable of iterables) {
    for (const item of iterable) {
      yield item;
    }
  }
}

const array1 = [1, 2, 3];
const array2 = ["a", "b", "c"];
const string1 = "XYZ";

const combined = combineIterators(array1, array2, string1);

for (const value of combined) {
  console.log(value); // Output: 1, 2, 3, a, b, c, X, Y, Z
}

            

              
                Copy
              
            
          

ในตัวอย่างนี้ ฟังก์ชัน `combineIterators` รับ iterables จำนวนเท่าใดก็ได้เป็นอาร์กิวเมนต์ มันจะวนซ้ำแต่ละ iterable และ yield แต่ละรายการ ผลลัพธ์ที่ได้คือ iterator เดียวที่สร้างค่าทั้งหมดจาก iterables ที่เป็นอินพุตทั้งหมด

การกรองและแปลง Iterators

คุณยังสามารถสร้าง iterators ที่กรองหรือแปลงค่าที่สร้างโดย iterator อื่นได้ ซึ่งช่วยให้คุณประมวลผลข้อมูลในรูปแบบไปป์ไลน์ (pipeline) โดยใช้การดำเนินการที่แตกต่างกันกับแต่ละค่าที่ถูกสร้างขึ้น

            
function* filterIterator(iterable, predicate) {
  for (const item of iterable) {
    if (predicate(item)) {
      yield item;
    }
  }
}

function* mapIterator(iterable, transform) {
  for (const item of iterable) {
    yield transform(item);
    }
}

const numbers = [1, 2, 3, 4, 5, 6];

const evenNumbers = filterIterator(numbers, (x) => x % 2 === 0);
const squaredEvenNumbers = mapIterator(evenNumbers, (x) => x * x);

for (const value of squaredEvenNumbers) {
    console.log(value); // Output: 4, 16, 36
}

            

              
                Copy
              
            
          

ในที่นี้ `filterIterator` รับ iterable และฟังก์ชัน predicate มันจะ yield เฉพาะรายการที่ predicate คืนค่าเป็น `true` ส่วน `mapIterator` จะรับ iterable และฟังก์ชัน transform มันจะ yield ผลลัพธ์ของการใช้ฟังก์ชัน transform กับแต่ละรายการ

การประยุกต์ใช้ในโลกจริง

Iterator Protocol ถูกใช้อย่างแพร่หลายในไลบรารีและเฟรมเวิร์กของ JavaScript และมีคุณค่าในการใช้งานจริงที่หลากหลาย โดยเฉพาะอย่างยิ่งเมื่อต้องจัดการกับชุดข้อมูลขนาดใหญ่หรือการดำเนินการแบบอะซิงโครนัส

• การประมวลผลข้อมูล: Iterators มีประโยชน์สำหรับการประมวลผลชุดข้อมูลขนาดใหญ่ได้อย่างมีประสิทธิภาพ เนื่องจากช่วยให้คุณทำงานกับข้อมูลเป็นส่วนๆ โดยไม่ต้องโหลดชุดข้อมูลทั้งหมดลงในหน่วยความจำ ลองจินตนาการถึงการแยกวิเคราะห์ไฟล์ CSV ขนาดใหญ่ที่มีข้อมูลลูกค้า Iterator สามารถช่วยให้คุณประมวลผลแต่ละแถวโดยไม่ต้องโหลดไฟล์ทั้งไฟล์เข้าสู่หน่วยความจำในคราวเดียว
• การดำเนินการแบบอะซิงโครนัส (Asynchronous Operations): Iterators สามารถใช้เพื่อจัดการการดำเนินการแบบอะซิงโครนัส เช่น การดึงข้อมูลจาก API คุณสามารถใช้ generator functions เพื่อหยุดการทำงานชั่วคราวจนกว่าข้อมูลจะพร้อมใช้งาน แล้วจึงทำงานต่อด้วยค่าถัดไป
• โครงสร้างข้อมูลแบบกำหนดเอง: Iterators เป็นสิ่งจำเป็นสำหรับการสร้างโครงสร้างข้อมูลแบบกำหนดเองที่มีข้อกำหนดการวนซ้ำที่เฉพาะเจาะจง ลองพิจารณาโครงสร้างข้อมูลแบบต้นไม้ (tree) คุณสามารถสร้าง custom iterator เพื่อวนซ้ำไปตามต้นไม้ในลำดับที่ต้องการได้ (เช่น depth-first หรือ breadth-first)
• การพัฒนาเกม: ในการพัฒนาเกม iterators สามารถใช้เพื่อจัดการอ็อบเจ็กต์ในเกม, เอฟเฟกต์อนุภาค และองค์ประกอบไดนามิกอื่นๆ
• ไลบรารีส่วนติดต่อผู้ใช้ (User Interface Libraries): ไลบรารี UI จำนวนมากใช้ iterators เพื่ออัปเดตและเรนเดอร์คอมโพเนนต์อย่างมีประสิทธิภาพตามการเปลี่ยนแปลงของข้อมูลเบื้องหลัง

แนวทางปฏิบัติที่ดีที่สุด (Best Practices)

• ใช้งาน Symbol.iterator ให้ถูกต้อง: ตรวจสอบให้แน่ใจว่าเมธอด Symbol.iterator ของคุณคืนค่าอ็อบเจ็กต์ iterator ที่สอดคล้องกับ Iterator Protocol
• จัดการแฟล็ก done อย่างแม่นยำ: แฟล็ก done มีความสำคัญอย่างยิ่งในการส่งสัญญาณสิ้นสุดการวนซ้ำ ตรวจสอบให้แน่ใจว่าได้ตั้งค่าอย่างถูกต้องในเมธอด next() ของคุณ
• พิจารณาใช้ Generator Functions: Generator functions เป็นวิธีที่กระชับและอ่านง่ายกว่าในการสร้าง iterators
• หลีกเลี่ยง Side Effects ใน next(): เมธอด next() ควรเน้นที่การดึงค่าถัดไปและอัปเดตสถานะของ iterator เป็นหลัก หลีกเลี่ยงการดำเนินการที่ซับซ้อนหรือผลข้างเคียง (side effects) ภายใน next()
• ทดสอบ Iterators ของคุณอย่างละเอียด: ทดสอบ custom iterators ของคุณด้วยชุดข้อมูลและสถานการณ์ที่แตกต่างกันเพื่อให้แน่ใจว่าทำงานได้อย่างถูกต้อง

สรุป

JavaScript Iterator Protocol เป็นวิธีที่ทรงพลังและยืดหยุ่นในการวนซ้ำโครงสร้างข้อมูล โดยการทำความเข้าใจโปรโตคอล Iterable และ Iterator และการใช้ประโยชน์จาก generator functions คุณจะสามารถสร้าง custom iterators ที่เหมาะกับความต้องการเฉพาะของคุณได้ ซึ่งจะช่วยให้คุณทำงานกับข้อมูลได้อย่างมีประสิทธิภาพ ปรับปรุงความสามารถในการอ่านโค้ด และเพิ่มประสิทธิภาพของแอปพลิเคชันของคุณ การเรียนรู้ iterators อย่างเชี่ยวชาญจะปลดล็อกความเข้าใจที่ลึกซึ้งยิ่งขึ้นเกี่ยวกับความสามารถของ JavaScript และช่วยให้คุณเขียนโค้ดที่สวยงามและมีประสิทธิภาพมากขึ้น